<script setup>
  import Product from '@/components/shop/Product.vue';
  import {computed, ref, toRefs} from "vue";
  import useCartStore from "@/stores/cart.js";
  import router from "@/router/index.js";

  // data
  const props = defineProps(['shopName'])
  const { shopName } = toRefs(props)
  const cartStore = useCartStore();
  // const curShopCart = ref({})
  const isShow = ref(false)

  // const isButtonShow = ref(true)

  // methods
  // 清空购物车
  const clearCart = ()=>{
    // 清空购物车中的商品数量
    shopCartList.value.forEach(item =>{
      item.number = 0
    })
    // 删除购物车
    cartStore.cartList = cartStore.cartList.filter(item => item !== shopCart.value)
  }
  // 结算跳转
  const balance = ()=>{
    router.push({
      name:'orderConfirmation',
      query:{
        shopName:props.shopName
      }
    })

  }

  // computed
  // 获取当前店铺购物车
  const shopCart = computed(()=>{  // 计算属性是一个ref对象，需要加value
    return cartStore.cartList.find(item => item.name === shopName.value)
  })

  // 加购的商品数量
  const shopCartCount = computed(()=>{
    // reduce
    if(shopCart.value){
      // reduce
      return shopCart.value.list.reduce((res,item)=> res + item.number, 0)
    }else {
      return 0
    }
  })

  // 获取当前购物车所有的商品
  const shopCartList = computed(()=>{
    if(shopCart.value){
      return shopCart.value.list
    }else {
      return []
    }
  })

  // 被选中商品列表
  const shopCartCheckedList = computed(()=> {
    return shopCartList.value.filter(item => item.checked)
  })

  // 被选中商品的数量
  const shopCartCheckedCount = computed(()=>{
    return shopCartCheckedList.value.reduce((res, item) => res + item.number, 0)
  })

  // 被选中的商品价格
  const shopCartCheckPrice = computed(()=>{
    return shopCartCheckedList.value.reduce((res, item)=> res + item.price * item.number, 0)
  })

  // 全选全不选
  const checkAll = computed({
    get(){
      // 小控制全选
      // console.log('getter')
      return shopCart.value.list.every(item => item.checked)
    },
    set(data){ // 当计算属性被修改成其他值时，这个值会被存在data中
      // 全选按钮控制小的选框
      shopCart.value.list.forEach(item =>{
        item.checked = data
      })
      // console.log('setter')
      console.log(data)
    }
  })
</script>

<template>
  <div class="cart">
<!--    蒙版  -->
    <div class="cart_mask" v-if="isShow" @click="isShow=!isShow"></div>
    <div class="cart_product" v-if="isShow">
      <div class="cart_product_header" v-if="shopCartCount > 0">
        <div class="cart_product_header_allChecked">
          <input type="checkbox" class="circle-checkbox" v-model="checkAll"> 全选
        </div>
        <div class="cart_product_header_clear" @click="clearCart">清空购物车</div>
      </div>
      <div class="cart_product_list" v-if="isShow">
        <div class="cart_product_list_item" v-for="(ele, index) in shopCartList" :key="index">
          <div class="checkbox">
            <!-- <input type="checkbox" class="circle-checkbox" :checked="item.checked" @change="changeChecked(item)" name="" id=""> -->
            <input type="checkbox" class="circle-checkbox" v-model="ele.checked">
          </div>
          <div class="content">
            <Product min="min" :product="ele" :shopName="shopName"/>
          </div>
        </div>
      </div>
    </div>
    <div class="cart_check">
      <div class="cart_check_icon">
        <img src="http://www.dell-lee.com/imgs/vue3/basket.png" alt="" @click="isShow=!isShow" />
        <span class="tag" v-if="shopCartCheckedCount > 0">{{ shopCartCheckedCount }}</span>
      </div>
      <div class="cart_check_empty" v-if="shopCartCount === 0">购物车是空的</div>
      <div class="cart_check_content" v-else>
        <div class="cart_check_content_total_price">总计 : <span class="check_content_total_price_number">￥{{ shopCartCheckPrice }}</span></div>
        <div class="cart_check_content_submit" @click="balance">结算</div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import "@/style/viriables.scss";
.cart {
  &_mask {
    position: absolute;
    top: 0;
    bottom: .5rem;
    left: 0;
    right: 0;
    background-color: rgba($color: #000000, $alpha: .4);
  }

  &_product {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: .5rem;
    background-color: $bgColor;

    //圆形复选框
    /* 设置选中背景 */
    .circle-checkbox:checked {
      background: #1673ff;
    }

    /* 设置复选框样式 */
    .circle-checkbox {
      width: .2rem;
      height: .2rem;
      background-color: #ffffff;
      border: solid 1px $light-fontColor;
      -webkit-border-radius: 50%;
      border-radius: 50%;
      font-size: 0.8rem;
      margin: 0;
      padding: 0;
      position: relative;
      display: inline-block;
      vertical-align: top;
      cursor: default;
      -webkit-appearance: none;
      -webkit-user-select: none;
      user-select: none;
    }

    /* 设置伪类，即显现的对勾样式 */
    .circle-checkbox:checked::after {
      content: "";
      top: 5px;
      left: 4px;
      position: absolute;
      background: transparent;
      border: #fff solid 2px;
      border-top: none;
      border-right: none;
      height: 3px;
      width: 8px;
      -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
    }

    &_header {
      padding: .18rem;
      display: flex;
      justify-content: space-between;
    }

    &_list {
      max-height: 3rem;
      overflow-y: scroll;

      &_item {
        display: flex;

        .checkbox {
          display: flex;
          align-items: center;
          margin-left: .18rem;
        }

        .content {
          flex: 1;
          width: 100%;
        }
      }
    }
  }

  &_check {
    width: 100%;
    height: .49rem;
    border-top: .01rem solid $content-bgColor;
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    // 购物车图标
    &_icon {
      width: .84rem;
      height: .49rem;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      img {
        width: .28rem;
        height: .26rem;
      }

      .tag {
        display: inline-block;
        width: .15rem;
        height: .15rem;
        border-radius: 50%;
        background-color: $hightlight-fontColor;
        color: $bgColor;
        font-size: .1rem;
        text-align: center;
        position: absolute;
        top: .05rem;
        right: .18rem;
      }

    }
    // 空购物车
    &_empty {
      line-height: .49rem;
    }
    // 总价
    &_content {
      flex: 1;
      display: flex;
      position: relative;
      width: 100%;

      &_total_price {
        flex: 1;
        line-height: .49rem;
        color: $hightlight-fontColor;

        &_number {
          font-size: .18rem;
        }
      }
      &_submit {
        width: .98rem;
        height: .49rem;
        background-color: $btn-bgColor;
        color: $bgColor;
        text-align: center;
        line-height: .49rem;
      }
    }
  }
}
</style>